<template>
  <div class="data-panel">
    <div class="data-item" @mousedown="downloadXml()" title="下载XML格式数据">
      <div class="data-item-icon bpmn-xml"></div>
    </div>
    <div class="data-item" @mousedown="downloadImage()" title="下载图片格式数据">
      <div class="data-item-icon bpmn-img"></div>
    </div>
    <div class="data-item">
      <input type="file" className="data-upload" @change="uploadXml($event)" title="上传XML格式数据"/>
      <div class="data-item-icon bpmn-upload"></div>
    </div>
    <div class="data-item" @mousedown="getGraphRawData()" title="下载JSON格式数据" >
      <div class="data-item-icon bpmn-look"></div>
    </div>
  </div>
</template>
<script lang="ts">
import LogicFlow from '@logicflow/core';

function download(filename: string, text: string) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function isJSON(str:string) {
  if (typeof str == "string") {
    try {
      var obj = JSON.parse(str);
      if (typeof obj == "object" && obj) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      console.log("error：" + str + "!!!" + e);
      return false;
    }
  }
  //console.log("It is not a string!");
}

type FileEventTarget = EventTarget & { files: FileList };

export default {
  name: "BpmnDataPanel",
  data() {
    return {};
  },
  props: {
    lf: Object,
  },

  mounted() {},

  methods: {
    downloadXml() {
      const data = (this.$props.lf as LogicFlow).getGraphData() as string;
      download("logic-flow.xml", data);
    },
    downloadImage() {
      (this.$props.lf as LogicFlow).getSnapshot();
    },
    uploadXml(ev: Event) {
      const file = (ev.target as FileEventTarget).files[0];
      const reader = new FileReader();
      reader.onload = (event: ProgressEvent<FileReader>) => {
        if (event.target) {
          let data = event.target.result as string;
          /* 这里JSON无法解析，只有XML可以载入？？
          if (isJSON(data)) {
            data = JSON.parse(data);
          }
          */
          (this.$props.lf as LogicFlow).render(data);
        }
      };
      reader.readAsText(file); // you could also read images and other binaries
    },
    getGraphRawData() {
      const data = JSON.stringify((this.$props.lf as LogicFlow).getGraphRawData());
      download("logic-flow.txt", data);
    },
  },
};
</script>
<style>
.data-panel {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 20px;
  width: auto;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.data-item {
  margin: 0px 5px;
  display: inline-block;
  position: relative;
}
.data-item-icon {
  width: 20px;
  height: 20px;
  background-size: cover;
}
.data-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.data-upload {
  opacity: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  right: 0;
}

.bpmn-xml {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-img {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-upload {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-look {
  background: url()
    center center no-repeat;
  cursor: grab;
}
</style>
